<script setup>
import TheWelcome from '../components/TheWelcome.vue'
import { ref } from 'vue'
const list = ref([])
const input = ref('')

const handlerClick = () => {
  list.value.push(input.value)
}

const handleDelClick = (index) => {
  list.value.splice(index, 1)
}
</script>

<template>
  <div class="main">
    <div class="row">
      <input class="input" type="text" v-model="input" />
      <input type="button" name="bt" value="确认1" @click="handlerClick" />
    </div>
    <div id="todogroup">
      <div class="item" v-for="(item, index) in list" :key="index">
        <input class="item-chk" type="checkbox" />
        <div class="item-sp">{{ item }}</div>
        <input
          id='item-del-"+index+"'
          class="item-del"
          type="button"
          value="删除"
          @click="handleDelClick(index)"
        />
      </div>
      <!-- 这里面 todo项 -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.main {
  /* background-color: aqua; */
  /* height: 200px; */

  padding: 8px;
  border: 1px solid #333333;
  border-radius: 8px;
}

.row {
  display: flex;
}

.item {
  display: flex;
  align-items: center;
  margin: 6px;
  padding: 3px;

  border-radius: 3px;
  background-color: #ffffff;
}

.item:hover {
  background-color: #dbdbdb;
  // transform: scale(1.2);

  .item-del {
    opacity: 1;
  }
}

.item-value {
  flex-grow: 1;
  color: #000000;
}

.item-del {
  color: aliceblue;

  background-color: red;

  border: 0px;

  opacity: 0;
}

.input {
  padding: 8px;

  outline: none;
  border: 2px solid #b1afaf;
}

.input:focus {
  box-shadow: 0px 0px 10px #3762d9;
  border: 2px solid #3762d9;
}
</style>
